<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>药品管理系统 - 个人信息</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #606266;
        }
        .app-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .logo-area {
            display: flex;
            align-items: center;
        }
        .logo {
            width: 50px;
            height: 50px;
            margin-right: 15px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
        }
        .system-name {
            font-size: 22px;
            font-weight: bold;
        }
        .nav-menu {
            display: flex;
            background-color: #304156;
            padding: 0 20px;
        }
        .nav-item {
            padding: 15px 20px;
            color: #bfcbd9;
            cursor: pointer;
            transition: all 0.3s;
        }
        .nav-item:hover, .nav-item.active {
            color: #409EFF;
            background-color: #263445;
            border-bottom: 2px solid #409EFF;
        }
        .main-content {
            flex: 1;
            padding: 20px;
            display: flex;
            justify-content: center;
        }
        .person-container {
            width: 600px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        .person-title {
            text-align: center;
            font-size: 24px;
            color: #409EFF;
            margin-bottom: 30px;
            font-weight: bold;
        }
        .person-form {
            width: 100%;
        }
        .form-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
        .footer {
            text-align: center;
            padding: 15px 0;
            color: #909399;
            font-size: 14px;
            background-color: #f5f7fa;
            border-top: 1px solid #e6e6e6;
        }
        .role-tag {
            padding: 0 10px;
            height: 32px;
            line-height: 30px;
            border-radius: 4px;
            font-size: 12px;
            display: inline-block;
        }
        .role-admin {
            background-color: #f0f9eb;
            color: #67c23a;
            border: 1px solid #e1f3d8;
        }
        .role-sales {
            background-color: #ecf5ff;
            color: #409eff;
            border: 1px solid #d9ecff;
        }
        .role-inventory {
            background-color: #fdf6ec;
            color: #e6a23c;
            border: 1px solid #faecd8;
        }
        .password-section {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #ebeef5;
        }
        .section-title {
            font-size: 16px;
            color: #409EFF;
            margin-bottom: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <header class="header">
        <div class="logo-area">
            <div class="logo">药</div>
            <div class="system-name">药品管理系统</div>
        </div>
        <div>
            <el-dropdown @command="handleUserCommand">
                    <span class="el-dropdown-link" style="color: white; cursor: pointer;">
                        {{ currentUser.username }} ({{ formatRole(currentUser.role) }})<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="main">返回主页</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>

    <nav class="nav-menu">
        <div class="nav-item" :class="{active: activeNav === 'main'}" @click="goToMain">返回主页</div>
        <div class="nav-item active">个人信息</div>
    </nav>

    <main class="main-content">
        <div class="person-container">
            <h2 class="person-title">个人信息</h2>
            <el-form :model="userForm" :rules="userRules" ref="userForm" class="person-form" label-width="100px">
                <!-- 基本信息 -->
                <el-form-item label="用户ID">
                    <el-input v-model="userForm.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="用户名" prop="username">
                    <el-input v-model="userForm.username" :disabled="!isEditing"></el-input>
                </el-form-item>

                <el-form-item label="角色">
                    <span :class="['role-tag', 'role-' + userForm.role]">{{ formatRole(userForm.role) }}</span>
                </el-form-item>

                <el-form-item label="创建时间">
                    <el-input v-model="userForm.createtime" disabled></el-input>
                </el-form-item>

                <!-- 密码修改区域 -->
                <div class="password-section" v-if="isEditing">
                    <div class="section-title">修改密码</div>

                    <el-form-item label="原密码" prop="oldPassword" v-if="showPasswordFields">
                        <el-input v-model="userForm.oldPassword" type="password" show-password></el-input>
                    </el-form-item>

                    <el-form-item label="新密码" prop="newPassword" v-if="showPasswordFields">
                        <el-input v-model="userForm.newPassword" type="password" show-password></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码" prop="confirmPassword" v-if="showPasswordFields">
                        <el-input v-model="userForm.confirmPassword" type="password" show-password></el-input>
                    </el-form-item>

                    <el-button type="text" @click="togglePasswordFields" style="margin-left: 100px;">
                        {{ showPasswordFields ? '取消修改密码' : '修改密码' }}
                    </el-button>
                </div>
            </el-form>

            <div class="form-buttons">
                <el-button type="primary" @click="handleEdit" v-if="!isEditing">编辑信息</el-button>
                <el-button @click="cancelEdit" v-if="isEditing">取消</el-button>
                <el-button type="primary" @click="submitForm" v-if="isEditing" :loading="loading">保存修改</el-button>
            </div>
        </div>
    </main>

    <footer class="footer">© 2023 药品管理系统 - 版权所有</footer>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            const validateConfirmPassword = (rule, value, callback) => {
                if (this.showPasswordFields && value === '') {
                    callback(new Error('请确认密码'));
                } else if (this.showPasswordFields && value !== this.userForm.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                activeNav: 'person',
                currentUser: { id: null, username: '', role: '' },
                userForm: {
                    id: null,
                    username: '',
                    role: '',
                    createtime: '',
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                },
                isEditing: false,
                showPasswordFields: false,
                loading: false,
                originalData: {},
                userRules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    oldPassword: [
                        {
                            validator: (rule, value, callback) => {
                                if (this.showPasswordFields && value === '') {
                                    callback(new Error('请输入原密码'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur'
                        }
                    ],
                    newPassword: [
                        {
                            validator: (rule, value, callback) => {
                                if (this.showPasswordFields && value === '') {
                                    callback(new Error('请输入新密码'));
                                } else if (this.showPasswordFields && value.length < 6) {
                                    callback(new Error('密码长度不能少于6位'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur'
                        }
                    ],
                    confirmPassword: [
                        { required: true, validator: validateConfirmPassword, trigger: 'blur' }
                    ]
                }
            };
        },
        mounted() {
            this.loadCurrentUser();
            this.loadUserInfo();
        },
        methods: {
            loadCurrentUser() {
                const savedUser = localStorage.getItem('currentUser');
                if (savedUser) {
                    this.currentUser = JSON.parse(savedUser);
                } else {
                    window.location.href = 'login.html';
                }
            },

            loadUserInfo() {
                axios.get('/pms/user/current')
                    .then(response => {
                        if (response.data.success) {
                            const userData = response.data.data;
                            this.userForm = {
                                ...userData,
                                oldPassword: '',
                                newPassword: '',
                                confirmPassword: ''
                            };
                            this.originalData = { ...userData };
                        } else {
                            this.$message.error('获取用户信息失败');
                        }
                    })
                    .catch(error => {
                        console.error('获取用户信息失败:', error);
                        this.$message.error('获取用户信息失败');
                    });
            },

            handleEdit() {
                this.isEditing = true;
            },

            cancelEdit() {
                this.isEditing = false;
                this.showPasswordFields = false;
                this.userForm = { ...this.originalData, oldPassword: '', newPassword: '', confirmPassword: '' };
                this.$refs.userForm.clearValidate();
            },

            togglePasswordFields() {
                this.showPasswordFields = !this.showPasswordFields;
                if (!this.showPasswordFields) {
                    this.userForm.oldPassword = '';
                    this.userForm.newPassword = '';
                    this.userForm.confirmPassword = '';
                }
                this.$refs.userForm.clearValidate();
            },

            submitForm() {
                this.$refs.userForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;

                        const updateData = {
                            id: this.userForm.id,
                            username: this.userForm.username
                        };

                        // 如果需要修改密码，添加密码相关字段
                        if (this.showPasswordFields) {
                            updateData.oldPassword = this.userForm.oldPassword;
                            updateData.newPassword = this.userForm.newPassword;
                        }

                        axios.put('/pms/user/updateProfile', updateData)
                            .then(response => {
                                this.loading = false;
                                if (response.data.success) {
                                    this.$message.success(response.data.message);
                                    this.isEditing = false;
                                    this.showPasswordFields = false;
                                    this.loadUserInfo();

                                    // 更新localStorage中的用户信息
                                    if (response.data.data) {
                                        localStorage.setItem('currentUser', JSON.stringify(response.data.data));
                                        this.loadCurrentUser();
                                    }
                                } else {
                                    this.$message.error(response.data.message);
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                console.error('更新用户信息失败:', error);
                                if (error.response && error.response.data) {
                                    this.$message.error(error.response.data.message);
                                } else {
                                    this.$message.error('更新用户信息失败');
                                }
                            });
                    }
                });
            },

            handleUserCommand(command) {
                if (command === 'main') {
                    this.goToMain();
                } else if (command === 'logout') {
                    this.handleLogout();
                }
            },

            goToMain() {
                window.location.href = 'main.html';
            },

            handleLogout() {
                axios.post('/pms/user/logout')
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success(response.data.message);
                            localStorage.removeItem('currentUser');
                            window.location.href = 'login.html';
                        }
                    })
                    .catch(error => {
                        console.error('退出登录失败:', error);
                    });
            },

            formatRole(role) {
                const roleMap = {
                    'admin': '管理员',
                    'sales': '销售员',
                    'inventory': '库存管理员'
                };
                return roleMap[role] || role;
            }
        }
    });
</script>
</body>
</html>